<template>
  <div>
    <div v-if="flag == 0">
      <div class="mlt">
        <el-button
          v-permissions="{ permission: ['add:CustomerArchives'] }"
          type="primary"
          @click="addReservationClisk"
        >
          新增{{ langs.page.customer }}
        </el-button>
      </div>
      <div style="margin-top: 20px; width: 80%; margin-bottom: 20px">
        <el-input
          v-model="cus_name"
          placeholder="搜索联系人姓名"
          style="width: 200px; margin-left: 10px"
          @keyup.enter.native="search()"
        />
        <el-input
          v-model="tel"
          placeholder="搜索手机号码"
          style="width: 200px; margin-left: 10px"
          @keyup.enter.native="search()"
        />
        <el-button style="margin-left: 10px" type="primary" @click="search">
          搜索
        </el-button>
        <el-button style="margin-left: 10px" type="primary" @click="Reset">
          重置
        </el-button>
      </div>
      <div class="ml">
        <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
          <el-table-column
            :label="langs.page.customer + '姓名'"
            prop="cus_name"
          />
          <el-table-column label="家庭组名称" prop="group_name" />
          <el-table-column label="联系方式" prop="tel" />
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="deleteUser(scope.row)">
                删除
              </el-button> -->
              <el-button
                v-permissions="{ permission: ['view:CustomerArchives'] }"
                type="primary"
                @click="detailsUsers(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total >= 10"
          background
          :current-page.sync="page"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog
        :before-close="handleClose"
        title="客户"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <el-form ref="form" label-width="80px" :model="form">
          <el-form-item :label="langs.page.customer + '姓名'">
            <!-- 客户 -->
            <el-input
              v-model="form.cus_name"
              :placeholder="'请输入' + langs.page.customer + '姓名'"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item :label="langs.page.member + '姓名'">
            <!-- 孩子 -->
            <el-input
              v-model="form.nick_name"
              :placeholder="'请输入' + langs.page.member + '姓名'"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="form.tel"
              placeholder="请输入联系电话"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item :label="langs.page.member + '性别'">
            <el-select
              v-model="genderValue"
              placeholder="请选择性别"
              @change="genderChange"
            >
              <el-option
                v-for="item in genderOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="来源">
            <el-select
              v-model="CusSourceValue"
              placeholder="请选择来源"
              @change="CusSourceChange"
            >
              <el-option
                v-for="item in getCusSourceOptions"
                :key="item.id"
                :label="item.source_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="langs.page.member + '生日'">
            <el-date-picker
              v-model="form.birthday"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="flag == 1">
      <DetailsUser :cusid="cusid" @showMain="showMain" />
    </div>
  </div>
</template>
<script>
  import { cusList, cusAdd, cusDel } from '@/api/customer'
  import { getCusSourceList } from '@/api/gustomerGroup'
  import DetailsUser from './components/detailsUser.vue'

  export default {
    components: { DetailsUser },
    data() {
      return {
        dialogVisible: false,
        flag: 0,
        cus_name: '',
        tel: '',
        doctorOptions: [],
        page: 1,
        emptyText: ' ',
        tableData: [],
        total: '',
        genderValue: '',
        CusSourceValue: '',
        form: {
          cus_name: '',
          tel: '',
          nick_name: '',
          gender: '',
          birthday: '',
        },
        genderOptions: [
          {
            id: 'male',
            name: '男',
          },
          {
            id: 'female',
            name: '女',
          },
        ],
        getCusSourceOptions: [],
        cusid: '',
        langs: JSON.parse(window.localStorage.getItem('lang')),
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          page: this.page,
          cus_name: this.cus_name,
          tel: this.tel,
        }
        cusList(params).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.total
          loading.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
        getCusSourceList().then((e) => {
          this.getCusSourceOptions = e.data
        })
      },
      // 下一页
      handleCurrentChange(val) {
        const _this = this
        _this.page = val
        this.init()
      },
      addReservationClisk() {
        this.form = {
          cus_name: '',
          tel: '',
          nick_name: '',
          gender: '',
          birthday: '',
        }
        this.genderValue = ''
        this.CusSourceValue = ''
        this.dialogVisible = true
      },
      showMain(e) {
        this.flag = e
        this.$nextTick(() => {
          this.init()
        })
      },
      // 详情
      details() {},
      search() {
        this.total = 0
        this.page = 1
        this.init()
        // const loading = this.$loading({
        //   lock: true,
        //   target:
        //     this.tableData.length == 0
        //       ? '.el-table__empty-block'
        //       : '.el-table__body',
        // })
        // const params = {
        //   cus_name: this.cus_name,
        //   tel: this.tel,
        // }
        // cusList(params).then((res) => {
        //   this.tableData = res.data.data
        //   this.total = res.data.total
        //   loading.close()
        //   if (res.data.data.length == 0) {
        //     this.emptyText = '暂无数据'
        //   }
        // })
      },
      Reset() {
        this.total = 0
        this.cus_name = ''
        this.tel = ''
        this.page = 1
        this.init()
      },
      deleteUser(e) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const params = {
              id: e.id,
            }
            cusDel(params).then(() => {
              this.init()
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      detailsUsers(e) {
        this.cusid = e.id
        this.flag = 1
      },
      handleEdit() {},
      handleDelete() {},
      userSubmit() {
        const jy = {
          cus_name: '请输入客户姓名',
          tel: '请输入联系电话',
          nick_name: '请输入孩子姓名',
          gender: '请输入性别',
          birthday: '请输入孩子生日',
        }
        for (var key in this.form) {
          if (this.form[key] == '') {
            this.$message.error(jy[key])
            return
          }
        }
        cusAdd(this.form)
          .then(() => {
            this.dialogVisible = false

            this.init()
            this.$message({
              message: '添加成功',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('添加失败')
          })
      },
      genderChange(e) {
        this.form.gender = e
      },
      CusSourceChange(e) {
        this.form.source = e
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
            this.form = { name: '', gender: '', birthday: '' }
          })
          .catch(() => {})
      },
    },
  }
</script>
<style></style>
